<template>
  <div>

    <h1>用户购票查询</h1>
    <el-row justify="space-around">
      <el-col :xs="16" :lg="7">
        <el-input @keydown.enter="searchTicket(eORNInput)" v-model="eORNInput" class="el-input"  size="large" placeholder="输入用户名或邮箱地址查询"></el-input>
        <el-button @click="searchTicket(eORNInput)" class="el-button" type="primary" size="large">查询</el-button>
      </el-col>
      <el-col :xs="16" :lg="7">
        <el-input @keydown.enter="searchById" v-model="idInput" class="el-input" size="large" placeholder="通过订单号查询"></el-input>
        <el-button @click="searchById"  class="el-button" type="primary" size="large">查询</el-button>
      </el-col>
    </el-row>
    <el-divider/>
    <el-row>
      <el-table :data="ticket">
        <el-table-column type="expand">
          <template #default="scope">
            <el-descriptions border>
              <el-descriptions-item label="订单号">{{scope.row.id}}</el-descriptions-item>
              <el-descriptions-item label="用户id">{{scope.row.userId}}</el-descriptions-item>
              <el-descriptions-item label="用户名">{{scope.row.userName}}</el-descriptions-item>
              <el-descriptions-item label="邮箱地址">{{scope.row.userEmail}}</el-descriptions-item>
              <el-descriptions-item label="门票名称">{{scope.row.ticketName}}</el-descriptions-item>
              <el-descriptions-item label="购票时间">{{scope.row.ticketBuyTime}}</el-descriptions-item>
              <el-descriptions-item label="过期时间">{{scope.row.ticketBuyTime}}</el-descriptions-item>
              <el-descriptions-item label="门票状态">
                <el-tag v-if="scope.row.ticketStatus==='UN_USE'" type="warning">
                  {{ status[scope.row.ticketStatus] }}
                </el-tag>
                <el-tag v-if="scope.row.ticketStatus==='USING'" type="success">
                  {{ status[scope.row.ticketStatus] }}
                </el-tag>
                <el-tag v-if="scope.row.ticketStatus==='EXPIRE' || scope.row.ticketStatus==='USED'" type="info">
                  {{ status[scope.row.ticketStatus] }}
                </el-tag>
              </el-descriptions-item>
            </el-descriptions>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="订单号" show-overflow-tooltip></el-table-column>
        <el-table-column prop="userId" label="用户id" show-overflow-tooltip></el-table-column>
        <el-table-column prop="userName" label="用户名"></el-table-column>
        <el-table-column prop="userEmail" label="邮箱地址" show-overflow-tooltip></el-table-column>
        <el-table-column prop="ticketName" label="门票名称"></el-table-column>
        <el-table-column prop="ticketBuyTime" label="购票时间"></el-table-column>
        <el-table-column prop="ticketExpireTime" label="过期时间"></el-table-column>
        <el-table-column label="门票状态">
          <template #default="scope">
            <el-tag v-if="scope.row.ticketStatus==='UN_USE'" type="warning">
              {{ status[scope.row.ticketStatus] }}
            </el-tag>
            <el-tag v-if="scope.row.ticketStatus==='USING'" type="success">
              {{ status[scope.row.ticketStatus] }}
            </el-tag>
            <el-tag v-if="scope.row.ticketStatus==='EXPIRE' || scope.row.ticketStatus==='USED'" type="info">
              {{ status[scope.row.ticketStatus] }}
            </el-tag>
            </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="primary" v-if="scope.row.ticketStatus==='UN_USE'" @click="submit(scope.row.id,scope.row.ticketExpireTime)">检票</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          style="width:100%;background-color: #ffffff;border-radius:0  0 5px 5px;justify-content: center"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageSize"
          layout='total, sizes, prev, pager, next, jumper'
          :total="total"
          :pager-count=5
      />
    </el-row>
  </div>
</template>

<script>
import {searchTicketByEON, searchTicketById, updateStatus} from "@/api/ticket";
import {dateFormatChin} from "@/utils/format";

export default {
  name: "searchTicket",
  data(){
    return{
      currentPage:1,
      total:0,
      pageSize:10,
      eORNInput:'',
      idInput:'',
      ticket:[],
      status:{'UN_USE':'未使用','USED':'已使用','EXPIRE':'已过期','USING':'使用中'}
    }
  },
  watch:{
    eORNInput(newVal){
      if (newVal===''){
        // this.currentPage=1
        // this.total=0
        // this.pageSize=10
        this.ticket=[]
      }
    },
    idInput(newVal){
      if (newVal===''){
        this.currentPage=1
        this.total=0
        this.pageSize=10
        this.ticket=[]
      }
    },

  },
  methods:{
    handleSizeChange(val) {
      this.pageSize = val
      this.searchTicket(this.eORNInput)
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.searchTicket(this.eORNInput)
    },
    submit(id,expireTime){
      const a=Date.parse(expireTime)
      const startTime=new Date(a)
     startTime.setHours(6)
     startTime.setMinutes(30)
     startTime.setSeconds(0)
      const endTime=new Date(a)
      endTime.setHours(19)
      endTime.setMinutes(30)
      endTime.setSeconds(0)
      const nowTime=Date.now()
      if (nowTime<startTime || nowTime>endTime){
        this.$confirm(`不在检票时间段内，当前门票的检票时间段为：${dateFormatChin(startTime,true)}-${dateFormatChin(endTime,true)} 是否强行检票?`, '警告',{
          confirmButtonText: '强行检票',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(()=>{
          updateStatus(id, 'USING').then(()=>{
            if (this.eORNInput!==''){
              this.searchTicket(this.eORNInput)
            }
            else {
              this.searchById()
            }
          })
        })
        .catch(()=>{

        })
      }
      else {
        updateStatus(id, 'USING').then(()=>{
          if (this.eORNInput!==''){
            this.searchTicket(this.eORNInput)
          }
          else {
            this.searchById()
          }
        })
      }
    },
    searchTicket(eON){
     this.idInput=''
      if (eON===''){
        this.$message({
          type:'warning',
          message:'请输入后在查询'
        })
        return
      }
      searchTicketByEON(eON,this.currentPage,this.pageSize).then(response=>{
        this.ticket=response.data.userTicketList
        this.total=response.data.total
      })
    },
    searchById(){
      this.eORNInput=''
      if (this.idInput===''){
        this.$message({
          type:'warning',
          message:'请输入后在查询'
        })
        return
      }
      searchTicketById(this.idInput).then(response=>{
        this.ticket=response.data.userTicket
      })
    }
  }
}
</script>

<style scoped>
.el-input{
  width: 250px;
  padding: 5px
}
.el-button{
  padding: 5px;
}
</style>
